<!--
 * @Author: Yang Zhang
 * @Date: 2021-12-03 00:09:20
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2021-12-29 22:35:41
 * @Description: 
-->
<template>
  <div class="sourWrap">
    <div class="title">Let's do this! Create your Interestore.</div>
    <div class="bottom-info">
      <div class="btm-title">Edit store cover</div>
      <a-radio-group @change="change" name="radioGroup" v-model:value="type" :default-value="type">
        <a-radio :value="1">Img</a-radio>
        <a-radio :value="2">Youtube video</a-radio>
      </a-radio-group>
      <div class="btm-title mt60 mb20">
        <span class="xing">*</span>Store cover
      </div>
      <div class="mb60">
        <a-upload
          v-model:file-list="fileList"
          name="file"
          list-type="picture"
          :headers="headers"
          :show-upload-list="false"
          action="https://www.intere.store/common/upload/file"
          :before-upload="beforeUpload"
          @change="handleChange"
          :class="[imageUrl ? 'uploaderwrap' : '']"
        >
          <div v-if="imageUrl" class="imgwrap">
            <img :src="imageUrl" />
            <div class="btntip">Re-upload</div>
          </div>
          <div v-else class="uploadkuang">
            <loading-outlined v-if="loading" style="font-size: 45px;"></loading-outlined>
            <plus-outlined v-else style="font-size: 45px;"></plus-outlined>
          </div>
        </a-upload>
        <div class="linkbtns">
          <div class="reupload linkbtn" @click.stop="deleteUploadimg">Delete</div>
        </div>
      </div>
      <div class="btm-title mb20" v-if="type === 1">
        <span class="xing">*</span>Store slogan
      </div>
      <a-input v-if="type === 1" v-model:value="slogan" placeholder="Write your shop slogan" />
      <div class="smdes" v-if="type === 1">Show on picture</div>
      <div class="btm-title mb20" v-if="type === 2">
        <span class="xing">*</span>Youtube video link
      </div>
      <a-textarea
        v-if="type === 2"
        placeholder="your video link"
        allow-clear
        v-model:value="youtubeLink"
      />
      <div class="smdes" v-if="type === 2">Hint: Youtube video share > embed > copy code</div>
      <img src="@/assets/Index/edit/prochahua.png" v-if="type === 2" class="pic" />
      <div class="kol-btn kol-btn-primary editBtn" @click.stop="submit">Save</div>
    </div>
    <img src="@/assets/Index/edit/edit2.png" class="rightBigimg" />
    <img src="@/assets/Index/edit/edit4.png" class="edit4" />
    <div class="int">
      <div>Your store cover</div>
      <div>Your store Slogan</div>
    </div>
    <div class="allhere">They are all here</div>
  </div>
</template>

<script lang='ts' setup>
import { message } from 'ant-design-vue'
import { reactive, toRefs, onBeforeMount, onMounted, ref, toRaw, computed } from 'vue'
import { useStore } from 'vuex'
import { getStorageItem } from '../../../utils/utils'
import { FileInfo, FileItem, ILogininfo } from '../../types'
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { updateStoreInfo } from '../../../api/home'
import { useRouter } from 'vue-router'
import { getSetting } from '../../../api/app'

const router = useRouter()

interface DataProps { }
const store = useStore()

const logininfo = ref({} as ILogininfo)
// 初始化是否回显的数据
const initData = () => {
  logininfo.value = getStorageItem('loginUserinfo')
  console.log('logininfo', logininfo.value)
  if (logininfo.value) {
    imageUrl.value = logininfo.value.coverPicUrl
    videoUrl.value = logininfo.value.coverVideoUrl
    slogan.value = logininfo.value.slogan
    type.value = logininfo.value.coverVideoUrl ? 2 : 1
    youtubeLink.value = logininfo.value.coverVideoUrl
  }
}

const videoUrl = ref('')
onMounted(() => {
  initData()
})
const type = ref(1)
const change = (e: any) => {
  type.value = e.target.value
  if (type.value === 1) {

  } else {

  }
}
const headers = {
  accessToken: store.state.user.accessToken || getStorageItem('accessToken')
}
const fileList = ref([]);
const loading = ref<boolean>(false);
const imageUrl = ref<string>('');
const handleChange = (info: FileInfo) => {
  if (info.file.status === 'uploading') {
    loading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    // Get this url from response in real world.
    const res: any = info.file.response
    console.log(res.result)
    imageUrl.value = res.result
  }
  if (info.file.status === 'error') {
    loading.value = false;
    message.error('upload error');
  }
};
const handleChangevideo = (info: FileInfo) => {
  if (info.file.status === 'uploading') {
    loading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    // Get this url from response in real world.
    const res: any = info.file.response
    console.log(res.result)
    videoUrl.value = res.result
  }
  if (info.file.status === 'error') {
    loading.value = false;
    message.error('upload error');
  }
};

const beforeUpload = (file: FileItem) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};


const slogan = ref('')
const youtubeLink = ref('')


const getLoginInfo = async () => {
  const res = await getSetting()
  console.log('获取了')
  if (res) {
    store.dispatch('user/updateUserinfo', res.result)
  }
}

const disable = computed(() => {
  if (type.value === 1) {
    return imageUrl.value && slogan.value
  } else {
    return imageUrl.value && youtubeLink.value
  }
})

// 提交事件
const submit = async () => {
  if (disable.value) {
    if (type.value === 1) {
      let param = {
        coverPicUrl: imageUrl.value || '',
        slogan: slogan.value || '',
      }
      const res = await updateStoreInfo(param)
      if (res) {
        router.push('/kol')
      }
    } else {
      let param = {
        coverVideoUrl: youtubeLink.value || '',
        coverPicUrl: imageUrl.value || '',
      }
      const res = await updateStoreInfo(param)
      if (res) {
        router.push('/kol')
      }
    }
    getLoginInfo()
  } else {
    message.error('Please fill out')
  }
}

const deleteUploadimg = () => {
  imageUrl.value = ''
  fileList.value = []
  loading.value = false
}
</script>
<style lang='scss' scoped>
.sourWrap {
  width: 1598px;
  height: 1656px;
  background-color: #fff;
  margin-top: 20px;
  position: relative;
  .uploadkuang {
    width: 539px;
    height: 244px;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .ant-upload {
    img {
      width: 539px;
      height: 244px;
    }
  }
  .ant-upload.ant-upload-select-picture-card {
    width: 539px !important;
    height: 244px;
  }

  .rightBigimg {
    width: 796px;
    height: 1095px;
    position: absolute;
    right: 0;
    top: 398px;
  }
  .edit4 {
    width: 178px;
    height: 204px;
    position: absolute;
    right: 71px;
    top: 340px;
  }
  .allhere {
    width: 265px;
    height: 32px;
    font-size: 30px;
    font-family: Chalkboard SE;
    font-weight: bold;
    color: #e60044;
    line-height: 30px;
    position: absolute;
    right: 248px;
    top: 301px;
  }
  .int {
    height: 130px;
    font-size: 30px;
    font-family: Chalkboard SE;
    font-weight: 400;
    color: #000000;
    line-height: 36px;
    position: absolute;
    top: 200px;
    right: 271px;
  }
  .title {
    font-size: 24px;
    font-family: Galvji;
    font-weight: bold;
    color: #000000;
    height: 102px;
    line-height: 102px;
    padding-left: 67px;
    border-bottom: 1px solid #e0e0e0;
  }
  .bottom-info {
    height: 1489px;
    width: 100%;
    padding: 39px 68px;
    .pic {
      width: 540px;
    }
    .btm-title {
      font-size: 18px;
      font-family: Galvji;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
      margin-bottom: 40px;
    }
    .smdes {
      font-size: 16px;
      font-family: Galvji;
      font-weight: 400;
      color: #757575;
      line-height: 16px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .mt60 {
      margin-top: 60px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mb60 {
      margin-bottom: 60px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .linkbtn {
      width: 540px;
      font-size: 14px;
      font-family: Galvji;
      font-weight: 400;
      text-decoration: underline;
      color: #e60044;
      margin-right: 24px;
      cursor: pointer;
      text-align: right;
    }
    .ant-input {
      width: 540px;
      height: 48px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
    }
    .ant-upload-picture-card-wrapper {
      background-color: #fff;
      width: 539px;
      height: 244px;
    }
    .xing {
      font-size: 18px;
      font-family: Galvji;
      font-weight: bold;
      color: rgba(230, 0, 68, 1);
    }
  }
}
.ant-input-group-wrapper {
  width: 540px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  .ant-input-group {
    height: 48px;
  }
}

.editBtn {
  width: 541px;
  height: 64px;
  background: #e60044;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  position: absolute;
  bottom: 150px;
  left: 70px;
}
.editBtn.disabeld {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
  color: #00000040;
  cursor: not-allowed;
}
.ant-input-affix-wrapper-textarea-with-clear-btn {
  width: 540px;
  height: 293px;
  textarea {
    height: 293px !important;
  }
}

.uploaderwrap {
  cursor: pointer;
  .imgwrap {
    overflow: hidden;
    position: relative;
    .btntip {
      display: none;
      width: 539px;
      height: 244px;
      position: absolute;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
    }
  }
  .imgwrap:hover {
    .btntip {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  // .ant-upload.ant-upload-select-picture-card {
  //   width: 110px;
  //   height: 110px;
  //   border: none;
  //   background-color: #fff;
  // }
}
</style>
